<template>
	<view>
		<z-paging ref="paging" :refresher-enabled="false" v-model="dataList" :refresher-out-rate="0.8"
			auto-scroll-to-top-when-reload bg-color="#F4F5F9"
			empty-view-img="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/12/987eadb1d50949a0a7e25dbbd99abe30.png"
			@query="queryList">
			<view slot="top" style="background: #fff; padding-bottom: 20rpx">
				<u-tabs :list="navList" @click="changeType" lineColor="#588BF3" :scrollable="false" :activeStyle="{
                        color: '#588BF3',
                        fontWeight: 'bold',
                        transform: 'scale(1.05)',
                    }" :inactiveStyle="{
                        color: '#999',
                        transform: 'scale(1)',
                    }">
				</u-tabs>
			</view>

			<view class="contentWrap">
				<view style="padding: 30rpx 30rpx 40rpx 0">
					<u--text prefixIcon="edit-pen-fill" iconStyle="font-size: 28px;color:#588BF3" :text="
                            current === '0' ? '添加拜访记录' : '添加记事摘要'
                        " size="18" @click="
                            show = true;
                            type = '添加';
                        " color="#588BF3" align="right"></u--text>
				</view>
				<view class="item" v-for="(item, index) in dataList" :key="index">
					<view class="item_time flex_wrap row_between">
						<u-icon name="calendar" color="#588BF3" size="22"></u-icon>
						<u-text :text="`时间：${$u.timeFormat(item.createTime)}`" bold size="28rpx" />
						<view style="display: flex; align-items: right" @click="edit(item)">
							<u-icon name="edit-pen" color="#588BF3" size="22"></u-icon>
						</view>
					</view>
					<view class="item_detail flex_wrap flex_column">
						<!-- <view class="item_wrap"> {{ item.info }}</view> -->
						<view class="item_wrap">
							<text class="my_text" space="ensp">{{ item.info }}</text>
						</view>
						<view class="item_delete" @click="deleteFun(item)">
							<u--text prefixIcon="trash" iconStyle="font-size: 16px;color:#999999" text="删除此条记录"
								size="12" color="#999" :margin="10" align="right"></u--text>
						</view>
					</view>
				</view>
			</view>
			<u-popup :show="show" mode="bottom" @close="close" @open="open" :closeOnClickOverlay="false"
				safeAreaInsetTop safeAreaInsetBottom zIndex="100000000" closeable>
				<view style="padding: 60rpx">
					<view>
						<view>
							<u-text prefixIcon="calendar" iconStyle="font-size: 26px;color:#588BF3" :text="
                                    current === '0' ? '拜访时间' : '摘要时间'
                                " bold size="32rpx" color="#333333" />
						</view>
						<view class="dateWrap flex_wrap" @click="openDate">
							<u-text :text="createTime ? createTime : '请选择时间'" bold size="28rpx" color="#666666" />
							<u-icon name="arrow-right" color="#999999" size="20" align="right"></u-icon>
						</view>
					</view>
					<u-gap height="10" bgColor="#fff"></u-gap>
					<view>
						<view>
							<u-text prefixIcon="file-text" iconStyle="font-size: 26px;color:#588BF3" :text="
                                    current === '0' ? '拜访内容' : '摘要内容'
                                " bold size="32rpx" color="#333333" />
						</view>
						<view>
							<u-textarea v-model="info" ref="textarea" count :formatter="formatter" maxlength="500" :confirmType="null"
								placeholder="请编辑内容" height="500rpx" :customStyle="{
                                    backgroundColor: '#F1F1F1',
                                    color: '#666',
                                    width: '100%',
                                    padding: '20rpx',
                                    paddingBottom: '40rpx',
                                    boxSizing: 'border-box',
                                    fontSize: '26rpx',
                                    margin: '10rpx 0',
                                }"></u-textarea>
						</view>
					</view>
					<u-gap height="20" bgColor="#fff"></u-gap>
					<view>
						<u-button type="primary" shape="circle" text="确定" color="#588BF3" @click="okbook"></u-button>
					</view>
					<view>
						<u-datetime-picker :show="showDate" v-model="value1" mode="date" autoHeight
							@cancel="timePicerCancel" @confirm="timePickerConfirm"
							closeOnClickOverlay></u-datetime-picker>
					</view>
				</view>
			</u-popup>
			<u-modal :show="modalShow" @confirm="confirm" ref="uModal" :asyncClose="true" content="确定删除该记录？"
				showCancelButton center @cancel="modalShow = false"></u-modal>
		</z-paging>
	</view>
</template>

<script>
	import {
		note_service,
		list,
		edit,
		note_servicedelete,
	} from "@/api/mybookSalesman.js";
	export default {
		data() {
			return {
				show: false,
				modalShow: false,
				showDate: false,
				value1: Number(new Date()),
				createTime: "",
				info: "",
				current: "0",
				inactiveStyle: {
					fontSize: "32rpx",
				},
				activeStyle: {
					fontSize: "32rpx",
					fontWeight: "bold",
					color: "#588BF3",
				},
				navList: [{
						name: "拜访记录",
						notepadType: "0", //:拜访记录
					},
					{
						name: "记事摘要",
						notepadType: "1", //1:记事摘要
					},
				],
				dataList: [],
				customerId: "",
				type: "",
				editData: "",
			};
		},
		onLoad(e) {
			this.customerId = e?.id;
		},
		onReady() {
			this.$refs.textarea.setFormatter(this.formatter);
		},

		methods: {
			formatter(value) {
				if (value.length > 500) return value.slice(0, 500);
				return value;
			},
			deleteFun(item) {
				this.editData = item;
				this.modalShow = true;
			},
			async confirm() {
				const {
					code,
					data,
					msg
				} = await note_servicedelete(
					this.editData.id
				);
				if (code === 200) {
					const index = this.dataList.findIndex((item) => {
						return item.id === this.editData.id;
					});
					this.modalShow = false;
					this.dataList.splice(index, 1);
				}
			},
			edit(item) {
				this.type = "编辑";
				this.editData = item;
				this.show = true;
				this.createTime = uni.$u.timeFormat(item.createTime, "yyyy-mm-dd");
				this.value1 = item.createTime;
				this.info = item.info;
			},
			okbook() {
				if (!this.info.trim().length || !this.createTime)
					return uni.$u.toast("请选择时间和填写内容！");
				const params = {
					info: this.info,
					createTime: this.createTime + " 00:00:00",
					notepadType: this.current,
					customerId: this.customerId,
				};
				if (this.type === "添加") {
					note_service(params).then((res) => {
						this.close();
						this.$refs.paging.reload();
					});

					return;
				}
				//  修改
				params.id = this.editData.id;
				edit(params).then((res) => {
					this.close();
					this.$refs.paging.reload();
				});
			},
			openDate() {
				this.showDate = true;
				this.value1 = this.createTime || Number(new Date());
			},
			changeType(e) {
				this.current = e.notepadType;
				this.$refs.paging.reload();
			},
			open() {
			},
			close() {
				this.show = false;
				this.show = false;
				this.createTime = "";
				this.info = "";
				// this.value1 = Number(new Date());
			},
			timePickerConfirm(e) {
				const timeFormat = uni.$u.timeFormat;
				this.createTime = timeFormat(e.value, "yyyy-mm-dd");
				this.value1 = e.value;
				this.timePicerCancel();
			},
			timePicerCancel() {
				this.showDate = false;
			},
			async queryList(pageNo, pageSize) {
				const params = {
					pageNum: pageNo,
					pageSize: pageSize,
					notepadType: this.current,
					customerId: this.customerId,
				};
				const result = await list(params);
				const rows = result.data.rows;
				this.$refs.paging.completeByTotal(rows, result.data.total);
			},
		},
	};
</script>

<style lang="scss" scoped>
	.search {
		padding: 32rpx 28rpx;
	}

	.contentWrap {
		background: #ffffff;
		border-radius: 16rpx 16rpx 0rpx 0rpx;
		margin-top: 30rpx;
		margin: 40rpx 28rpx 0;
		box-sizing: border-box;
		overflow: hidden;
	}

	.dateWrap {
		width: 100%;
		height: 80rpx;
		box-sizing: border-box;
		background: #f1f1f1;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		opacity: 1;
		line-height: 80rpx;
		padding-left: 40rpx;
		padding-right: 20rpx;
		margin: 20rpx 0;
	}
	.my_text {
		word-break: break-word; //可以避免文字超出限制
	}

	.item {
		padding-left: 40rpx;
		box-sizing: border-box;
		position: relative;
	}

	.item:before {
		content: "";
		position: absolute;
		width: 2rpx;
		height: 92%;
		left: 32rpx;
		top: 70rpx;
		border-width: 2rpx;
		border-left: 2rpx dashed #d8d8d8;
	}

	.item::after {
		content: "";
		width: 20rpx;
		height: 20rpx;
		background-color: #5e78ed;
		position: absolute;
		top: 40rpx;
		left: 5%;
		transform: translate(-50%, -50%);
		border-radius: 50%;
		box-shadow: 0 0 0 12rpx rgba(226, 228, 251, 0.8);
	}

	.item_time {
		height: 80rpx;
		padding: 0 24rpx;
	}

	::v-deep u-textarea {
		background: #f1f1f1;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}

	.item_detail {
		padding: 26rpx 20rpx 20rpx;
		font-weight: 400;
		color: #666666;
		line-height: 40rpx;
		font-size: 28rpx;

		.item_wrap {
			background: #f3f7ff;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			padding: 20rpx 24rpx;
			box-sizing: border-box;
			min-height: 200rpx;
			color: #333;
		}

		.item_delete {
			margin-top: 20rpx;
		}
	}
</style>
